<template>
    <div class="left-menu">
        <el-menu
            class="el-menu-vertical-demo"
            :collapse="isCollapse"
            @open="handleOpen"
            :default-openeds="defaultOpenDs">
            <el-sub-menu index="1">
                <template #title>
                    <el-icon :size="20" color="#409EFC" class="no-inherit">
                        <Edit />
                    </el-icon>
                    <span>监控管理</span>
                </template>
                <el-menu-item-group>
                    <template #title>监控</template>
                    <el-menu-item index="1-1">监控池1</el-menu-item>
                    <el-menu-item index="1-2">监控池2</el-menu-item>
                </el-menu-item-group>
                <el-sub-menu index="1-4">
                    <template #title><span>仪表盘</span></template>
                </el-sub-menu>
            </el-sub-menu>
        </el-menu>
    </div>
</template>
<script lang="ts">

import { defineComponent } from 'vue'
import {Edit}  from '@element-plus/icons-vue'

export default defineComponent({
    data() {
        return {
            isCollapse: false,
            defaultOpenDs: ["1","1-4"]
        }
    },
    mounted() {
        console.log("Left-Menu mounted...");
    },
    methods: {
        handleOpen(key: string, keyPath: string[]) {
            console.log(key, keyPath);
        },

    },
})
</script>
<style scoped>
    .left-menu {
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
    border-right: 1px;
    }
</style>
